import React from "react";
import {Menu, Layout, Form, Button, Dialog, Input} from "element-react";
import styles from '../css/App.module.css';
import {HeaderProp, HeaderState} from "../data/Header";
import {Urls} from "../config/Urls";
import {Http} from "../config/Http";
import {Group} from "../data/Group";

export class AppHeader extends React.Component<HeaderProp, HeaderState> {

    constructor(props: any) {
        super(props);
        this.state = {
            groupDialogVisible: false,
            groupForm: {name: ''}
        };
    }

    onSelect(index: string) {
        if (index === '3-create') {
            this.setState({
                groupDialogVisible: true
            })
        } else if (index.startsWith('3')){
            if (this.props.user.groups){
                let group = this.props.user.groups[parseInt(index.substr(2))];
                this.props.onGroupSelect(group);
            }
        } else if (index === '1') {
            this.props.onHomeSelect(this.props.currentGroup);
        }
    }

    onChange(key: any, value: any) {
        this.setState(
            {
                groupForm : {name: value}
            }
        )
    }

    createGroup() {
        Http.post<Group>(Urls.POST_CREATE_GROUP, this.state.groupForm).then(
            group => {
                this.setState({
                    groupForm: {name: ''},
                    groupDialogVisible: false
                });
                this.props.onGroupCreate(group);
            }
        ).catch(e => {
            console.error(e);
        });
    }


    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        let groupsE: any = [];
        let groupMenu;
        if (this.props.user.groups && this.props.user.groups.length > 0) {
            this.props.user.groups.forEach((group, index) => {
                let newIndex = '3-' + index;
                groupsE.push(<Menu.Item key={newIndex} index={newIndex}>{group.name}</Menu.Item>);
            });
        }
        groupsE.push(
            <Menu.Item key={'3-create'} index={'3-create'}>创建组</Menu.Item>
        );
        groupMenu = <Menu.SubMenu index={'3'} title={this.props.currentGroup.name}>
            {groupsE}
        </Menu.SubMenu>;

        return <div>
            <Menu theme="dark" defaultActive="1" className="el-menu-demo" mode="horizontal"
                  onSelect={this.onSelect.bind(this)}>
                <Layout.Row type="flex">
                    <Layout.Col span="12">
                        <Menu.Item index="1">首页</Menu.Item>
                        <Menu.SubMenu index="2" title="工作台">
                            <Menu.Item index="2-1">状态查询</Menu.Item>
                            <Menu.Item index="2-2">日志分析</Menu.Item>
                        </Menu.SubMenu>
                    </Layout.Col>
                    <Layout.Col span="12">
                        <div className={styles.marginRight}>
                            {groupMenu}
                            <Menu.SubMenu index="4" title={this.props.user.username}>
                                <Menu.Item index="4-1">退出登陆</Menu.Item>
                            </Menu.SubMenu>

                        </div>
                    </Layout.Col>
                </Layout.Row>
            </Menu>

            {/* group dialog */}
            <Dialog
                title="新建组"
                size="tiny"
                visible={this.state.groupDialogVisible}
                onCancel={() => this.setState({groupDialogVisible: false})}
                lockScroll={false}
            ><Form model={this.state.groupForm}>
                <Dialog.Body>
                    <Form.Item label="活动名称">
                        <Input value={this.state.groupForm.name} onChange={this.onChange.bind(this, 'name')}/>
                    </Form.Item>
                </Dialog.Body>
                <Dialog.Footer className="dialog-footer">
                    <Button onClick={() => this.setState({groupDialogVisible: false})}>取消</Button>
                    <Button type="primary" onClick={this.createGroup.bind(this)}>确定</Button>
                </Dialog.Footer>
            </Form>
            </Dialog>

        </div>;
    }
}